<template>
  <lls-dialog
    title="实体关系"
    :visible="visible"
    width="500px"
    @close="handleClose"
    :close-on-click-modal="false">
    <div class="content" v-if="entities[0] && entities[1]">
      <div class="item">
        <div class="label">from</div>
        <div>{{ entities[0].text }}&nbsp;&nbsp;&nbsp;({{ entities[0].entityText }})</div>
      </div>
      <div class="item">
        <div class="label">to</div>
        <div>{{ entities[1].text }}&nbsp;&nbsp;&nbsp;({{ entities[1].entityText }})</div>
      </div>
      <div class="item">
        <div class="label">对应关系</div>
        <div>
          <lls-radio-group v-model="relationType">
            <lls-radio v-for="i in relationTypes" :key="i.type" :label="i.type">{{ i.name }}</lls-radio>
          </lls-radio-group>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <lls-button v-if="editMode" type="primary" plain @click="handleDelete">删除</lls-button>
      <lls-button v-if="editMode" type="primary" plain @click="handleReselect">重设</lls-button>
      <lls-button type="primary" plain @click="handleClose">取消</lls-button>
      <lls-button type="primary" @click="handleSubmit">确定</lls-button>
    </span>
  </lls-dialog>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    relationEntities: Array,
    relationId: Number,
    relation: Object || null
  },

  inject: [
    'emitEvent',
    'testRelations',
    'setStatus',
    'setReselectId'
  ],

  data () {
    return {
      relationType: '',
      nodeClass: ''
    }
  },

  computed: {
    editMode () {
      return !!this.relation
    },
    entities () {
      return this.relation
        ? this.relation.entities
        : this.relationEntities
    },
    relationTypes () {
      return this.testRelations(this.entities[0].type, this.entities[1].type)
    }
  },

  watch: {
    relation () {
      if (this.relation) {
        this.relationType = this.relation.type
      } else {
        this.relationType = ''
      }
    }
  },

  methods: {
    handleClose () {
      this.$emit('update:visible', false)
      this.relationType = ''
    },
    handleSubmit () {
      if (!this.relationType) {
        this.$message.error('对应关系不能为空')
        return
      }
      const info = [
        undefined,
        this.relationType,
        [
          ['Arg1', this.entities[0].id],
          ['Arg2', this.entities[1].id]
        ]
      ]
      if (this.editMode) {
        const id = this.relation.id
        info[0] = id
        this.emitEvent('modify-relation', id, info)
      } else {
        info[0] = 'R' + this.relationId
        this.emitEvent('add-relation', info)
      }
      this.handleClose()
    },
    handleDelete () {
      this.emitEvent('delete-relation', this.relation.id)
      this.handleClose()
    },
    handleReselect () {
      this.nodeClass = this.getNodeClass()
      document.querySelectorAll(this.nodeClass).forEach(i => {
        i.classList.add('reselect')
      })
      this.handleClose()
      this.setReselectId(this.entities[0].id)
      this.setStatus('reselect-relation')

      document.addEventListener('mouseup', this.removeClass)
    },
    removeClass () {
      document.querySelectorAll(this.nodeClass).forEach(i => {
        i.classList.remove('reselect')
      })
      document.removeEventListener('mouseup', this.removeClass)
    },
    getNodeClass () {
      return `g[data-relation-id="${this.relation.id}"],g[data-label-id="${this.entities[0].id}"],g[data-label-id="${this.entities[1].id}"]`
    }
  }
}
</script>

<style lang="stylus" scoped>
.content {
  .item {
    display: flex;
    & + .item {
      margin-top: 20px;
    }
    .label {
      flex-shrink: 0;
      width: 50px;
      text-align: right;
      margin-right: 20px;
      color: #666;
    }
    .lls-radio {
      display: block;
      & + .lls-radio {
        margin-top: 16px;
      }
    }
  }
}
</style>